<template>
  <div class="dashboard">
    <!-- 顶部统计卡片 -->
    <div class="stat-cards">
      <div class="stat-card">
        <div class="stat-header">
          <span class="stat-label">最受欢迎学习方式</span>
          <span class="icon">👁️</span>
        </div>
        <div class="stat-value">视觉型</div>
        <div class="stat-change">占比 35.2%</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <span class="stat-label">黄金学习时段</span>
          <span class="icon">☀️</span>
        </div>
        <div class="stat-value">早晨</div>
        <div class="stat-change">占比 43.7%</div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <span class="stat-label">热门陪伴功能</span>
          <span class="icon">🔔</span>
        </div>
        <div class="stat-value">学习提醒</div>
        <div class="stat-change">占比 53.8%</div>
      </div>
    </div>

    <!-- 导航标签 -->
    <div class="tabs">
      <button
          v-for="tab in tabs"
          :key="tab.id"
          :class="['tab', { active: activeTab === tab.id }]"
          @click="activeTab = tab.id"
      >
        <span class="tab-icon">{{ tab.icon }}</span>
        <span>{{ tab.label }}</span>
      </button>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 学习风格分布 -->
      <div v-show="activeTab === 'style'" class="content-section">
        <h3 class="section-title">学习风格分布</h3>
        <p class="section-subtitle">不同学习风格偏好的学生占比分析</p>

        <div class="chart-container">
          <svg width="300" height="300" viewBox="0 0 300 300" class="donut-chart">
            <circle cx="150" cy="150" r="80" fill="white"/>
            <!-- 视觉型 35.2% -->
            <path d="M 150 70 A 80 80 0 0 1 219.4 102.8 L 150 150 Z" fill="#8B7FED"/>
            <!-- 听觉型 29.5% -->
            <path d="M 219.4 102.8 A 80 80 0 0 1 219.4 197.2 L 150 150 Z" fill="#7BC9A8"/>
            <!-- 动手型 20.4% -->
            <path d="M 219.4 197.2 A 80 80 0 0 1 103.4 217.5 L 150 150 Z" fill="#F6C452"/>
            <!-- 阅读型 14.9% -->
            <path d="M 103.4 217.5 A 80 80 0 0 1 150 70 L 150 150 Z" fill="#F38B8B"/>
          </svg>
        </div>

        <div class="legend">
          <div class="legend-item">
            <div class="legend-color" style="background: #8B7FED;"></div>
            <span class="legend-icon">👁️</span>
            <span class="legend-label">视觉型</span>
            <span class="legend-value">342人 (35.2%)</span>
            <div class="legend-bar">
              <div class="legend-bar-fill" style="width: 35.2%; background: #8B7FED;"></div>
            </div>
          </div>

          <div class="legend-item">
            <div class="legend-color" style="background: #7BC9A8;"></div>
            <span class="legend-icon">🎧</span>
            <span class="legend-label">听觉型</span>
            <span class="legend-value">287人 (29.5%)</span>
            <div class="legend-bar">
              <div class="legend-bar-fill" style="width: 29.5%; background: #7BC9A8;"></div>
            </div>
          </div>

          <div class="legend-item">
            <div class="legend-color" style="background: #F6C452;"></div>
            <span class="legend-icon">✋</span>
            <span class="legend-label">动手型</span>
            <span class="legend-value">198人 (20.4%)</span>
            <div class="legend-bar">
              <div class="legend-bar-fill" style="width: 20.4%; background: #F6C452;"></div>
            </div>
          </div>

          <div class="legend-item">
            <div class="legend-color" style="background: #F38B8B;"></div>
            <span class="legend-icon">📖</span>
            <span class="legend-label">阅读型</span>
            <span class="legend-value">145人 (14.9%)</span>
            <div class="legend-bar">
              <div class="legend-bar-fill" style="width: 14.9%; background: #F38B8B;"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 时间偏好 -->
      <div v-show="activeTab === 'time'" class="content-section">
        <h3 class="section-title">学习时间偏好分布</h3>
        <p class="section-subtitle">学生偏好的学习时间段统计</p>

        <div class="bar-chart">
          <div class="bar-item" style="height: 425px;">
            <div class="bar" style="background: #8B7FED;"></div>
          </div>
          <div class="bar-item" style="height: 312px;">
            <div class="bar" style="background: #8B7FED;"></div>
          </div>
          <div class="bar-item" style="height: 189px;">
            <div class="bar" style="background: #8B7FED;"></div>
          </div>
          <div class="bar-item" style="height: 46px;">
            <div class="bar" style="background: #8B7FED;"></div>
          </div>
        </div>

        <div class="time-cards">
          <div class="time-card">
            <div class="time-icon">☀️</div>
            <div class="time-label">早晨</div>
            <div class="time-range">6-12时</div>
            <div class="time-count">425人</div>
            <div class="time-percent">43.7%</div>
          </div>

          <div class="time-card">
            <div class="time-icon">🌅</div>
            <div class="time-label">下午</div>
            <div class="time-range">12-18时</div>
            <div class="time-count">312人</div>
            <div class="time-percent">32.1%</div>
          </div>

          <div class="time-card">
            <div class="time-icon">🌙</div>
            <div class="time-label">晚上</div>
            <div class="time-range">18-24时</div>
            <div class="time-count">189人</div>
            <div class="time-percent">19.4%</div>
          </div>

          <div class="time-card">
            <div class="time-icon">🕐</div>
            <div class="time-label">凌晨</div>
            <div class="time-range">24-6时</div>
            <div class="time-count">46人</div>
            <div class="time-percent">4.7%</div>
          </div>
        </div>
      </div>

      <!-- 陪伴功能 -->
      <div v-show="activeTab === 'feature'" class="content-section">
        <h3 class="section-title">学习搭子功能偏好</h3>
        <p class="section-subtitle">不同陪伴功能的受欢迎程度排行</p>

        <div class="feature-list">
          <div class="feature-item">
            <div class="feature-rank">#1</div>
            <div class="feature-icon">🔔</div>
            <div class="feature-name">学习提醒</div>
            <div class="feature-count">523人 (53.8%)</div>
            <div class="feature-bar">
              <div class="feature-bar-fill" style="width: 53.8%;"></div>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-rank">#2</div>
            <div class="feature-icon">📈</div>
            <div class="feature-name">进度追踪</div>
            <div class="feature-count">487人 (50.1%)</div>
            <div class="feature-bar">
              <div class="feature-bar-fill" style="width: 50.1%;"></div>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-rank">#3</div>
            <div class="feature-icon">📅</div>
            <div class="feature-name">计划指定</div>
            <div class="feature-count">398人 (40.9%)</div>
            <div class="feature-bar">
              <div class="feature-bar-fill" style="width: 40.9%;"></div>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-rank">#4</div>
            <div class="feature-icon">💬</div>
            <div class="feature-name">问答解惑</div>
            <div class="feature-count">356人 (36.6%)</div>
            <div class="feature-bar">
              <div class="feature-bar-fill" style="width: 36.6%;"></div>
            </div>
          </div>

          <div class="feature-item">
            <div class="feature-rank">#5</div>
            <div class="feature-icon">❤️</div>
            <div class="feature-name">鼓励陪伴</div>
            <div class="feature-count">278人 (28.6%)</div>
            <div class="feature-bar">
              <div class="feature-bar-fill" style="width: 28.6%;"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 趋势分析 -->
      <div v-show="activeTab === 'trend'" class="content-section">
        <h3 class="section-title">学习风格趋势分析</h3>
        <p class="section-subtitle">过去6个月各学习风格的增长趋势</p>

        <div class="line-chart">
          <svg width="100%" height="400" viewBox="0 0 1000 400">
            <!-- 网格线 -->
            <line x1="50" y1="50" x2="50" y2="350" stroke="#e0e0e0" stroke-width="1"/>
            <line x1="50" y1="350" x2="950" y2="350" stroke="#e0e0e0" stroke-width="1"/>

            <!-- Y轴刻度 -->
            <text x="30" y="60" font-size="14" fill="#999">360</text>
            <text x="30" y="140" font-size="14" fill="#999">270</text>
            <text x="30" y="220" font-size="14" fill="#999">180</text>
            <text x="30" y="300" font-size="14" fill="#999">90</text>
            <text x="30" y="360" font-size="14" fill="#999">0</text>

            <!-- X轴标签 -->
            <text x="100" y="380" font-size="14" fill="#666">1月</text>
            <text x="280" y="380" font-size="14" fill="#666">2月</text>
            <text x="460" y="380" font-size="14" fill="#666">3月</text>
            <text x="640" y="380" font-size="14" fill="#666">4月</text>
            <text x="820" y="380" font-size="14" fill="#666">5月</text>
            <text x="920" y="380" font-size="14" fill="#666">6月</text>

            <!-- 视觉型线 -->
            <polyline points="100,80 280,70 460,60 640,50 820,45 920,40"
                      fill="none" stroke="#8B7FED" stroke-width="3"/>

            <!-- 听觉型线 -->
            <polyline points="100,120 280,105 460,90 640,80 820,75 920,70"
                      fill="none" stroke="#7BC9A8" stroke-width="3"/>

            <!-- 动手型线 -->
            <polyline points="100,180 280,175 460,168 640,160 820,155 920,150"
                      fill="none" stroke="#F6C452" stroke-width="3"/>

            <!-- 阅读型线 -->
            <polyline points="100,270 280,260 460,250 640,240 820,235 920,230"
                      fill="none" stroke="#F38B8B" stroke-width="3"/>
          </svg>
        </div>

        <div class="chart-legend">
          <div class="chart-legend-item">
            <div class="legend-dot" style="background: #8B7FED;"></div>
            <span>视觉型</span>
          </div>
          <div class="chart-legend-item">
            <div class="legend-dot" style="background: #7BC9A8;"></div>
            <span>听觉型</span>
          </div>
          <div class="chart-legend-item">
            <div class="legend-dot" style="background: #F6C452;"></div>
            <span>动手型</span>
          </div>
          <div class="chart-legend-item">
            <div class="legend-dot" style="background: #F38B8B;"></div>
            <span>阅读型</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('style');

const tabs = [
  { id: 'style', label: '学习风格', icon: '👤' },
  { id: 'time', label: '时间偏好', icon: '📊' },
  { id: 'feature', label: '陪伴功能', icon: '📈' },
  { id: 'trend', label: '趋势分析', icon: '📈' }
];
</script>

<style scoped>
.dashboard {
  padding: 24px;
  background: #f5f5f7;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.icon {
  font-size: 20px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 13px;
  color: #666;
}

.stat-change.positive {
  color: #34c759;
}

.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  background: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tab {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s;
}

.tab:hover {
  background: #f5f5f7;
}

.tab.active {
  background: #f5f5f7;
  color: #1a1a1a;
  font-weight: 600;
}

.content {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.section-subtitle {
  font-size: 13px;
  color: #999;
  margin-bottom: 30px;
}

.chart-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.donut-chart {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
  max-width: 240px;
  height: auto;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legend-item {
  display: grid;
  grid-template-columns: 16px 24px 80px 120px 1fr;
  align-items: center;
  gap: 10px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.legend-icon {
  font-size: 16px;
}

.legend-label {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
}

.legend-value {
  font-size: 14px;
  color: #666;
  text-align: right;
}

.legend-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.legend-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 450px;
  margin-bottom: 40px;
  padding: 0 40px;
}

.bar-item {
  width: 120px;
  display: flex;
  align-items: flex-end;
}

.bar {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}

.time-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.time-card {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.time-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.time-label {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.time-range {
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
}

.time-count {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.time-percent {
  font-size: 14px;
  color: #666;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature-item {
  display: grid;
  grid-template-columns: 60px 40px 120px 150px 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 12px;
}

.feature-rank {
  font-size: 18px;
  font-weight: 700;
  color: #999;
}

.feature-icon {
  font-size: 24px;
}

.feature-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.feature-count {
  font-size: 15px;
  color: #666;
}

.feature-bar {
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.feature-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a1a1a 0%, #333 100%);
  border-radius: 6px;
  transition: width 0.6s ease;
}

.line-chart {
  margin-bottom: 30px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }

  .stat-cards {
    grid-template-columns: 1fr;
  }

  .tabs {
    overflow-x: auto;
  }

  .legend-item,
  .feature-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
</style>